<template>
    <div class="ecsc-page-con">
        <div class="ecsc-page-header">
            <div></div>
            <div class="selected-opt dyreturn-sel" v-if="showSelectionOpt" style="position: absolute;height: 36px;margin-top: -29px;">
                <i class="el-icon-close" @click="closeSelectionOpt"></i>
                <span class="selected-opt-num-item">已选
                        <b class="num-con">{{selectItems.length}}</b> 项</span>
                <a href="javascript:" class="selected-opt-btn selected-opt-item" @click="deleteRow(selectItems, dataList)">
                    <i class="el-icon-delete"></i> 批量删除</a>
            </div>
        </div>
       
        <div class="ecsc-page-body">
            <div class="ecsc-list-con" v-loading="pagination.loading">
                <el-table :data="dataList" height="auto"
                    @selection-change="handleSelectionChange"
                    ref="multipleTable" empty-text="暂无数据"
                    :default-sort="{prop: 'billNo', order: 'descending'}"
                    class="ecsc-reset-table"
                    :class="{'empty-table':dataList.length==0}">
                    <el-table-column type="selection" width="28" align="center"></el-table-column>
                    <el-table-column  fixed="left"   width="70" align="center">
                        <template slot-scope="scope">
                            <a href="javascript:" @click="addData(scope.$index)" class="edit-button">
                                +
                            </a>
                            <a href="javascript:" @click="deleteRow(scope.$index,dataList)" class="edit-button">-</a>
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip label="单号" prop="billNo" align="left" fixed width="135"
                                     sortable="custom">
                        <template slot-scope="scope">
                            <a href="javascript:"
                               
                               v-if="scope.row.billStatus =='bill_status_has_pause' || scope.row.billStatus == 'bill_status_has_save'"
                               class="ecsc-button-advanced ecsc-table-margin ecsc-table-button">{{scope.row['billNo']}}</a>
                            <!--修改-->
                            <a href="javascript:"
                               
                               v-if="scope.row.billStatus !='bill_status_has_pause'&&scope.row.billStatus !='bill_status_has_save'"
                               class="ecsc-button-advanced ecsc-table-margin ecsc-table-button">{{scope.row['billNo']}}</a>
                            <!--查看-->
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip v-for="c in columns" :key="c.prop" :prop="c.prop"
                                     :sortable="c.sortable" :label='c.name' :fixed="c.fixed" :align="c.align"
                                     :filter-multiple="c.filterMultiple"
                                     :filters="c.filters" :formatter="c.formatter" :min-width="c.width"
                                     :column-key='c.columnKey'>
                    </el-table-column>

                    <el-table-column label="品项数" show-overflow-tooltip prop="itemNum" align="right" min-width="90"
                                     sortable="custom">
                        <template slot-scope="scope">
                            <span v-show="!scope.row['new']" style="padding-right:24px">{{scope.row.itemNum}}</span>
                            <el-input v-show="scope.row['new']" type="text" size="small" v-model="scope.row['itemNum']" ></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label='生效日期' prop="beginDate" min-width="120" align="left" sortable="custom">
                        <template slot-scope="scope">
                            <span href="javascript:"
                                  class="table-span-item">{{scope.row.beginDate == null ? '' : new Date(scope.row.beginDate).Format("yyyy-MM-dd")}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label='截止日期' prop="endDate" min-width="120" align="left" sortable="custom">
                        <template slot-scope="scope">
                            <span href="javascript:"
                                  class="table-span-item">{{scope.row.endDate == null ? '' : new Date(scope.row.endDate).Format("yyyy-MM-dd")}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label='审核人' min-width="80" align="left">
                        <template slot-scope="scope">
                            <span href="javascript:" class="table-span-item">{{scope.row.lastOperator}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label='审核日期' min-width="120" prop="lastUpdatetime" align="left" sortable="custom">
                        <template slot-scope="scope">
                            <span href="javascript:"
                                  class="table-span-item">{{scope.row.lastUpdatetime == null ? '' : new Date(scope.row.lastUpdatetime).Format("yyyy-MM-dd")}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label='制单人' min-width="80" align="left">
                        <template slot-scope="scope">
                            <span href="javascript:" class="table-span-item">{{scope.row.entryName}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label='制单日期' prop="entryDate" min-width="120" align="left" sortable="custom">
                        <template slot-scope="scope">
                            <span href="javascript:"
                                  class="table-span-item">{{scope.row.entryDate == null ? '' : new Date(scope.row.entryDate).Format("yyyy-MM-dd")}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label='操作' min-width="130" align="center" fixed="right">
                        <template slot-scope="scope">
                            <a href="javascript:" class="ecsc-button-advanced action"
                               v-if="scope.row.billStatus =='bill_status_has_pause' || scope.row.billStatus == 'bill_status_has_save'"
                              >修改</a>
                            <!-- <a href="javascript:" class="ecsc-button-advanced action"
                                v-if="scope.row.billStatus =='bill_status_has_pause' || scope.row.billStatus == 'bill_status_has_save'"
                                @click="deleteRow(scope.$index, dataList)">删除</a> -->
                        </template>
                    </el-table-column>
                </el-table>
                <!--分页-->
                <el-pagination
                        v-if="!(pagination.totalpages == 1 && pagination.pagesizes == pageSizeFirst)"
                        background
                        @size-change="sizeChange"
                        @current-change="currentChange"
                        :current-page="pagination.pageno"
                        :page-sizes="pagination.pagesizes"
                        :page-size="pagination.pagesize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="pagination.total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
import { mapGetters, mapMutations, mapActions} from "vuex";
export default {
    name: 'index',
    data() {
        return {
            dataList: [
                {
                    id: '01',
                    billNo: '01010101010b',
                    storeName: '河北省1',
                    supplierName: '河北供应商',
                    billStatus: 'bill_status_has_save',
                    itemNum: 6,
                    beginDate: '2018-09-9',
                    endDate: '2019-8-9',
                    lastOperator: null,
                    lastUpdatetime: null,
                    entryName: '张三',
                    entryDate: '2018-7-7'
                },{
                    id: '02',
                    billNo: '01010101010b',
                    storeName: '河北省2',
                    supplierName: '河北供应商',
                    billStatus: 'bill_status_has_save',
                    itemNum: 6,
                    beginDate: '2018-09-9',
                    endDate: '2019-8-9',
                    lastOperator: null,
                    lastUpdatetime: null,
                    entryName: '张三',
                    entryDate: '2018-7-7'
                },{
                    id: '03',
                    billNo: '01010101010b',
                    storeName: '河北省',
                    supplierName: '河北供应商',
                    billStatus: 'bill_status_has_save',
                    itemNum: 6,
                    beginDate: '2018-09-9',
                    endDate: '2019-8-9',
                    lastOperator: null,
                    lastUpdatetime: null,
                    entryName: '张三',
                    entryDate: '2018-7-7'
                },{
                    id: '04',
                    billNo: '01010101010b',
                    storeName: '河北省',
                    supplierName: '河北供应商',
                    billStatus: 'bill_status_has_save',
                    itemNum: 6,
                    beginDate: '2018-09-9',
                    endDate: '2019-8-9',
                    lastOperator: null,
                    lastUpdatetime: null,
                    entryName: '张三',
                    entryDate: '2018-7-7'
                },{
                    id: '05',
                    billNo: '01010101010b',
                    storeName: '河北省',
                    supplierName: '河北供应商',
                    billStatus: 'bill_status_has_save',
                    itemNum: 6,
                    beginDate: '2018-09-9',
                    endDate: '2019-8-9',
                    lastOperator: null,
                    lastUpdatetime: null,
                    entryName: '张三',
                    entryDate: '2018-7-7'
                },{
                    id: '06',
                    billNo: '01010101010b',
                    storeName: '河北省',
                    supplierName: '河北供应商',
                    billStatus: 'bill_status_has_save',
                    itemNum: 6,
                    beginDate: '2018-09-9',
                    endDate: '2019-8-9',
                    lastOperator: null,
                    lastUpdatetime: null,
                    entryName: '张三',
                    entryDate: '2018-7-7'
                },{
                    id: '07',
                    billNo: '01010101010b',
                    storeName: '河北省',
                    supplierName: '河北供应商',
                    billStatus: 'bill_status_has_save',
                    itemNum: 6,
                    beginDate: '2018-09-9',
                    endDate: '2019-8-9',
                    lastOperator: null,
                    lastUpdatetime: null,
                    entryName: '张三',
                    entryDate: '2018-7-7'
                },{
                    id: '08',
                    billNo: '01010101010b',
                    storeName: '河北省',
                    supplierName: '河北供应商',
                    billStatus: 'bill_status_has_save',
                    itemNum: 6,
                    beginDate: '2018-09-9',
                    endDate: '2019-8-9',
                    lastOperator: null,
                    lastUpdatetime: null,
                    entryName: '张三',
                    entryDate: '2018-7-7'
                },{
                    id: '09',
                    billNo: '01010101010b',
                    storeName: '河北省',
                    supplierName: '河北供应商',
                    billStatus: 'bill_status_has_save',
                    itemNum: 6,
                    beginDate: '2018-09-9',
                    endDate: '2019-8-9',
                    lastOperator: null,
                    lastUpdatetime: null,
                    entryName: '张三',
                    entryDate: '2018-7-7'
                }
            ],
            columns: [
                {'name': '签约机构', 'prop': 'storeName', 'align': 'left', 'width': '130px'},
                {'name': '供应商', 'prop': 'supplierName', 'align': 'left', 'width': '130px'},
//                    {'name':'协议状态','prop':'billStatus','align':'center',formatter: this.billStatus},
                {
                    'name': '合同状态',
                    'columnKey': 'billStatus',
                    'prop': 'billStatus',
                    'f': false,
                    'align': 'center',
                    'width': '90px',
                    formatter: this.billStatus,
                    'filters': [{'text': '已保存', 'value': 'bill_status_has_save'}, 
                        {'text': '已审核','value': 'bill_status_has_audit'},
                        {'text': '已暂停', 'value': 'bill_status_has_pause'}
                    ],
                    'filterMethod': this.yaoFilterTag,
                    'filterMultiple': false,
                }
            ],
            newItem:{'new':true},
        }
    },
    computed: {
        ...mapGetters(['pagination', 'selectItems']),
        selectionlength() {
            return this.selectItems.length;
        },
        showSelectionOpt() {
            return (this.selectionlength > 0) ? true : false
        },
    },
    methods: {
        ...mapActions(['sizeChange', 'currentChange']),
        ...mapMutations(['setSelectItems']),
        closeSelectionOpt() {
            this.setSelectItems([]);
            this.$refs.multipleTable.clearSelection();
        },
        handleSelectionChange(val) {
            let idObjList = []
            for (let value of Object.values(val)) {
                idObjList.push({
                    'id': value.id,
                    'billNo': value.billNo
                });
            }
            idObjList.forEach(valItem=>{
                this.dataList.forEach((item, index)=>{
                    if(valItem.id == item.id){
                        valItem.index = index;
                    }
                })
            })
           
            this.setSelectItems(idObjList);
        },
        yaoFilterTag(value, row) { //协议状态 表头切换
//                console.log('value',value,row)
            return row.billStatus === value;
        },
        addData(index){
            this.dataList.push(JSON.parse(JSON.stringify(this.newItem)))
        },
        deleteRow(indexs, rows) {
            if(indexs instanceof Array){
                indexs.forEach((item, index)=>{
                    rows.splice(item.index, 1);
                })
            }else{
                rows.splice(indexs, 1);
            }
           
        }
    }
}
</script>
<style lang="less" scoped>
    .index-con{
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .index-main{
        bottom: -3px;
        left: 0;
        right: 0;
        padding-bottom: 0;
        position: absolute;
    }
</style>

